<template>
  <div v-if="showContent">
    <ContentLoader primaryColor="#e6e6e6"/>
    <ContentLoader>
      <rect x="60" y="20" rx="3" ry="3" width="250" height="10" />
      <rect x="60" y="40" rx="3" ry="3" width="250" height="10" />
      <rect x="60" y="60" rx="3" ry="3" width="250" height="10" />
      <rect x="60" y="80" rx="3" ry="3" width="250" height="10" />
      <rect x="60" y="100" rx="3" ry="3" width="250" height="10" />
      <rect x="60" y="120" rx="3" ry="3" width="250" height="10" />
    </ContentLoader>
  </div>
  <div v-else class="balance-wrapper">
    <div class="header-wrapper">
      <Back />
      <div class="balance"
          @click="handleOpen">提现</div>
      <div class="title">余额</div>
    </div>
    <div class="balance-num">
      <div class="num">
        <count-to :start-val="0" :end-val="Number(balance)" :duration="2200" separator="" :decimals="2"/>
      </div>
      <div class="desc">余额</div>
    </div>
    <div class="balance-list">
      <div class="title">提现记录</div>
    </div>
    <common-scroll ref="scroll"
                  :listenScroll="listenScroll"
                  @pullingDown="handleRefresh"
                  @pullingUp="handleUpdate"
                  @scroll="handleScroll"
                  class="scroll">
      <div class="scroll-container">
          <pullrefresh-content :scroll-top="scrollTop"
                            :refresh-content="refreshContent"></pullrefresh-content>
          <ul class="list">
            <li v-for="item of lists" :key="item.id" border-bottom-1px class="balance-item">
              <div class="order-info">
                <div class="order-num">{{ item.wit_no }}</div>
                <div class="order-price">￥<span>{{ item.cash_amount }}</span></div>
                <div v-if="Number(item.status) === 0" class="order-status no-audit">未审核</div>
                <div v-if="Number(item.status) === 1" class="order-status audit">已审核</div>
                <div v-if="Number(item.status) === 2" class="order-status no-pass">未通过</div>
              </div>
              <div class="order-time">{{ parseTimeFuc(item.create_at) }}</div>
            </li>
          </ul>
          <load-more :isLoading="isLoading" :isMore="lists.length === Number(total) && lists.length > 0" />
          <empty :isEmpty="Number(total) === 0"/>
      </div>
    </common-scroll>
    <van-popup v-model="show"
              class="pop">
      <Pop :desc="'请输入提现金额'"
          :btnDesc="'立即提现'"
          :show="show"
          @close="show = false"
          @submit="handleSubmit"
          @scroll="handleScrollBottom" />
    </van-popup>
  </div>
</template>

<script>
import Back from '@/components/back'
import Pop from '@/components/Pop'
import CommonScroll from '@/components/Scroll/scroll'
import PullrefreshContent from '@/components/PullrefreshContent'
import { ContentLoader } from 'vue-content-loader'
import { balanceInfo, withdrawList, withdrawAdd } from '@/api/withdraw'
import Empty from '@/components/empty'
import CountTo from 'vue-count-to'
import LoadMore from '@/components/loadMore'
import { parseTime } from '@/utils'

export default {
  name: 'balance',
  components: {
    Back,
    Pop,
    CommonScroll,
    PullrefreshContent,
    ContentLoader,
    CountTo,
    Empty,
    LoadMore
  },
  data () {
    return {
      show: false,
      refreshContent: '下拉刷新...',
      scrollTop: 0,
      showContent: true,
      balance: 0,
      limitQuery: {
        page: 1,
        size: 10
      },
      lists: [],
      total: 0,
      isLoading: false,
      parseTimeFuc: parseTime
    }
  },
  created () {
    this.listenScroll = true
    this.initInfo()
  },
  methods: {
    async handleUpdate () {
      const { lists, total } = this
      if (lists.length === Number(total) || this.isLoading) {
        this.$refs.scroll.finishPullUp()
        return
      }
      this.isLoading = true
      await this.getWithdrawLists()
      this.$refs.scroll.finishPullUp()
      this.$refs.scroll.refresh()
    },
    async handleRefresh () {
      this.limitQuery.page = 1
      this.lists = []
      this.refreshContent = '加载中...'
      this.isLoading = false
      await this.initInfo()
      this.$refs.scroll.finishPullDown()
      this.$refs.scroll.refresh()
      setTimeout(() => {
        this.refreshContent = '下拉刷新...'
      }, 500)
    },
    handleScroll (pos) {
      this.scrollTop = pos.y
    },
    handleOpen () {
      this.show = true
    },
    async initInfo () {
      const { page, size } = this.limitQuery
      const res = await Promise.all([balanceInfo(), withdrawList({ page, size })])
      this.showContent = false
      this.balance = res[0].data.balance
      this.lists = this.lists.concat(res[1].data.lists)
      this.total = res[1].data.total
      this.isLoading = false
    },
    async getWithdrawLists () {
      this.limitQuery.page++
      const { page, size } = this.limitQuery
      const res = await withdrawList({ page, size })
      this.lists = this.lists.concat(res.data.lists)
      this.total = res.data.total
      this.isLoading = false
    },
    // 提现
    async handleSubmit (amount) {
      const { balance } = this
      const { content, password } = amount
      if (isNaN(Number(content))) {
        this.$toast({
          message: '输入内容应为数字',
          duration: 1000
        })
        return false
      }
      if (Number(content) > Number(balance)) {
        this.$toast({
          message: '输入金额不能大于提现金额',
          duration: 1000
        })
        return false
      }
      this.$toast.loading({
        mask: false,
        message: '提现中'
      })
      try {
        await withdrawAdd({ amount: content, pay_password: password })
        this.$toast.clear()
        this.$toast.success({
          message: '操作成功',
          duration: 1000,
          onClose: async () => {
            this.limitQuery.page = 1
            this.lists = []
            await this.initInfo()
            this.show = false
          }
        })
      } catch (error) {
        // this.show = false
      }
    },
    handleScrollBottom () {
      window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight))
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.balance-wrapper
  initPosition()
  background-color $common_bgc

  .header-wrapper
    width 100%
    height 88px
    display flex
    justify-content space-between
    align-items center
    background-color $primary
    font-size $home_size
    color $btn_font_color
    position relative

    .balance
      height 100%
      padding-left 20px
      padding-right 20px
      box-sizing border-box
      text-align center
      line-height 88px

    .title
      font-size $home_header_size
      position absolute
      top 50%
      left 50%
      transform translate(-50%, -50%)

  .balance-num
    height 218px
    display flex
    flex-direction column
    justify-items center
    align-items center
    background-color $primary
    padding-top 28px
    box-sizing border-box
    box-shadow 0px 4px 12px 0px rgba(22, 25, 31, 0.16)

    .num
      font-size 80px
      line-height 100px
      color $btn_font_color

    .desc
      font-size $home_size
      color $btn_font_color
      opacity 0.7
      line-height 56px

  .scroll
    top 390px
    padding-left 24px
    padding-right 24px
    box-sizing border-box

    .scroll-container
      min-height 100.2%
      .list
        width 100%
        .balance-item
          width 100%
          padding-top 22px
          padding-bottom 22px
          box-sizing border-box
          .order-info
            display flex
            line-height 56px
            justify-content space-between
            .order-num
              font-size $btn_size
              color $home_header_font_color
            .order-price
              font-size $home_card_size
              color $home_header_font_color
              span
                font-size $home_size
            .order-status
              font-size $btn_size
              color $audit_font_color
            .no-audit, .no-pass
              color #FE4443
          .order-time
            font-size $order_time_fize
            color $home_font_color
            line-height 52px

  .balance-list
    width 100%
    padding-top 24px
    padding-left 24px
    padding-right 24px
    box-sizing border-box
    background-color $common_bgc

    .title
      font-size $home_size
      line-height 60px
      position relative
      text-indent 16px

      &::before
        content: ''
        position absolute
        top 50%
        transform translateY(-50%)
        left 0
        width 6px
        height 22px
        background $primary
        border-radius 6px
  .pop
    border-radius 20px
</style>
